<template>
    <div>
        <el-row :gutter="20">
            <el-card shadow="hover" style="height:403px;">
                <div slot="header" class="clearfix">
                    <span>待办事项</span>
                    <el-button style="float: right; padding: 3px 0" @click="add" type="text">添加</el-button>
                </div>
                <el-table :show-header="false" :data="todoList" style="width:100%;">
                    <el-table-column>
                        <template slot-scope="scope">
                            <div>{{ scope.row.id }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <div>{{ scope.row.mobilePhone }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <div>{{ scope.row.userName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <div>{{ scope.row.registerTime }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-button type="text" @click="dialogVisible = true,setUser = scope.row">设置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-row>


        <el-dialog title="设置用户" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>
                用户名<el-input v-model="setUser.userName" placeholder="请输入内容"></el-input>
                手机号<el-input v-model="setUser.mobilePhone" placeholder="请输入内容"></el-input>
                密码<el-input v-model="setUser.password" placeholder="请输入内容"></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doset();dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import { adminSetuser, getUserList } from '../../api/index';
export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            dialogVisible: false,
            setUser: {
                id: 0,
                mobilePhone: "",
                userName: "",
                registerTime: "",
            },
            todoList: [
                {
                    id: 0,
                    mobilePhone: "",
                    userName: "",
                    registerTime: "",
                }
            ]
        }
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    created() {
        this.getData();
    },
    activated() {
        this.getData();
    },
    // deactivated() {
    //     window.removeEventListener('resize', this.renderChart);
    //     bus.$off('collapse', this.handleBus);
    // },
    methods: {
        getData() {
            getUserList().then(e => {
                if (e.code == 200) {
                    this.todoList = e.data
                } else {
                    this.$message.error(e.msg);
                    return false;
                }
            })
        },
        doset(){
            adminSetuser(this.setUser).then(e=>{
                if (e.code == 200) {
                    if(this.setUser.id == undefined){
                        this.todoList.push(e.data)
                    }
                } else {
                    this.$message.error(e.msg);
                    return false;
                }
            })
        },
        add(){
            this.dialogVisible = true,
            this.setUser = {
                mobilePhone: "",
                userName: "",
                password: ""
            }
        }
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
